<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script
      type="text/javascript"
      src="http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"
    ></script>
    <script
      type="text/javascript"
      src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"
    ></script>
    <style type="text/css">
      #box1 {
        width: 44px;
        height: 44px;
        position: absolute;
        background: lightskyblue;
      }
    </style>
    <script type="text/javascript" type="text/javascript">
      // Connecting to ROS
      var ros = new ROSLIB.Ros({
        url: 'ws://192.168.239.128:9090',
      })

      var isconected = false

      //判断是否连接成功并输出相应的提示消息到web控制台
      ros.on('connection', function () {
        isconected = true
        console.log('Connected to websocket server.')
        subscribe()
      })

      ros.on('error', function (error) {
        isconected = false
        console.log('Error connecting to websocket server: ', error)
      })

      ros.on('close', function () {
        isconected = false
        console.log('Connection to websocket server closed.')
        unsubscribe()
      })

      // Publishing a Topic
      var cmdVel = new ROSLIB.Topic({
        ros: ros,
        name: 'turtle1/cmd_vel',
        messageType: 'geometry_msgs/Twist',
      }) //创建一个topic,它的名字是'/cmd_vel',,消息类型是'geometry_msgs/Twist'

      var twist = new ROSLIB.Message({
        linear: {
          x: 0.0,
          y: 0.0,
          z: 0.0,
        },
        angular: {
          x: 0.0,
          y: 0.0,
          z: 0.0,
        },
      }) //创建一个message

      function control_move(direction) {
        twist.linear.x = 0.0
        twist.linear.y = 0
        twist.linear.z = 0
        twist.angular.x = 0
        twist.angular.y = 0
        twist.angular.z = 0.0

        switch (direction) {
          case 'up':
            twist.linear.x = 2.0
            break
          case 'down':
            twist.linear.x = -2.0
            break
          case 'left':
            twist.angular.z = 2.0
            break
          case 'right':
            twist.angular.z = -2.0
            break
        }
        cmdVel.publish(twist) //发布twist消息
      }

      var timer = null
      function buttonmove() {
        var oUp = document.getElementById('up')
        var oDown = document.getElementById('down')
        var oLeft = document.getElementById('left')
        var oRight = document.getElementById('right')

        oUp.onmousedown = function () {
          Move('up')
        }
        oDown.onmousedown = function () {
          Move('down')
        }

        oLeft.onmousedown = function () {
          Move('left')
        }

        oRight.onmousedown = function () {
          Move('right')
        }

        oUp.onmouseup = oDown.onmouseup = oLeft.onmouseup = oRight.onmouseup = function () {
          MouseUp()
        }
      }

      function keymove(event) {
        event =
          event ||
          window.event /*||为或语句，当IE不能识别event时候，就执行window.event 赋值*/
        console.log(event.keyCode)
        switch (event.keyCode /*keyCode:字母和数字键的键码值*/) {
          /*65,87,68,83分别对应awds*/
          case 65:
            Move('left')
            break
          case 87:
            Move('up')
            break
          case 68:
            Move('right')
            break
          case 83:
            Move('down')
            break
          default:
            break
        }
      }

      var MoveTime = 20

      function Move(f) {
        clearInterval(timer)

        timer = setInterval(function () {
          control_move(f)
        }, MoveTime)
      }

      function MouseUp() {
        clearInterval(timer)
      }

      function KeyUp(event) {
        MouseUp()
      }
      window.onload = function () {
        buttonmove()
        document.onkeyup = KeyUp
        document.onkeydown = keymove
        Movebox()
      }

      // Subscribing to a Topic
      var listener = new ROSLIB.Topic({
        ros: ros,
        name: '/turtle1/pose',
        messageType: 'turtlesim/Pose',
      }) //创建一个topic,它的名字是'/turtle1/pose',,消息类型是'turtlesim/Pose',用于接收乌龟位置信息

      var turtle_x = 0.0
      var turtle_y = 0.0

      function subscribe() {
        //在连接成功后，控制div的位置，
        listener.subscribe(function (message) {
          turtle_x = message.x
          turtle_y = message.y
          document.getElementById('output').innerHTML =
            'Received message on ' +
            listener.name +
            '  x: ' +
            message.x +
            ' ,y: ' +
            message.y
        })
      }

      function unsubscribe() {
        //在断开连接后，取消订阅
        listener.unsubscribe()
      }

      function Movebox() {
        var obox = document.getElementById('box1')
        var timer = null

        clearInterval(timer)

        timer = setInterval(function () {
          if (!isconected) {
            obox.style.left = '0px'
            obox.style.top = '0px'
          } else {
            obox.style.left = Math.round(60 * turtle_x) - 330 + 'px'
            console.log(obox.style.left)
            obox.style.top = 330 - Math.round(60 * turtle_y) + 'px'
            console.log(obox.style.top)
          }
        }, 20)
      }
    </script>
  </head>
  <body>
    <h1>rosbridge Simple example--Move turtle with teleop or button</h1>
    <p>
      First,on robot machine,run: roslaunch rosbridge_server
      rosbridge_websocket.launch
    </p>
    <p>second,on robot machine,run: rosrun turtlesim turtlesim_node</p>
    <p>third,on this webpage control turtle with up,down,left,right key</p>
    <p>Check your Web Console for output.</p>

    <input type="button" value="前行" id="up" />
    <input type="button" value="后退" id="down" />
    <input type="button" value="左转" id="left" />
    <input type="button" value="右转" id="right" />

    <p>@author Joshua 2021-04-23</p>
    <p id="output"></p>

    <div
      id="mbox"
      style="
        width: 704px;
        height: 704px;
        border: 1px solid red;
        position: relative;
      "
    >
      <div
        id="box1"
        style="margin-left: 330px; margin-top: 330px; position: absolute"
      ></div>
    </div>
  </body>
</html>
